<template>
    <div class="myinfo">
        <div class="myinfo2 myinfo3">
            <ul>
                <li v-for="item in this.isManageAddress" :key="item.id">
                    <p>服务地址：{{ item.address }}</p>
                    <div>
                        <div>到期时间：<span>{{ item.endTime }}</span></div>
                        <a :href="jiaofei()">续费</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>    
</template>

<script>
import { mapState,mapActions } from 'vuex'
export default {
    created(){
        this.getRecharge();
    },
    computed:{
        ...mapState({
            rechargeData: state => state.personModules.rechargeData
            // gjfdata: state => state.gjfdata
        }),
        isManageAddress(){
            // 单独使用 filter 会报错，为何
            let callBack = (item) => Number(item.isManage) != 0 ;
            return Array.prototype.filter.call(this.rechargeData,callBack);
        }
    },
    methods:{
        ...mapActions({
            getRecharge:'personModules/getRecharge',
        }),
        jiaofei(){
            return '/chongzhi'
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/order.scss";
</style>
